<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>面向对象类</title>
</head>
<body>
  <p>类的声明</p>
  <p>生成实例</p>
  <p>如何实现继承</p>
  <p>继承的几种方式</p>
  <script>
    // es5类的声明：构造函数
    function Animal (name) {
      this.name = name
    }
    Animal.prototype.say = () => {console.log('haha')}
    console.log(new Animal('animal1'))
    // es6 class关键字声明
    class Animal2 {
      constructor (name) {
        this.name = name
      }
      say () {
        console.log('say hahah')
      }
    }
    console.log(new Animal2('animal2'))
    new Animal2('animal2').say()
    class Cat extends Animal{
      constructor (name) {
        super(name)
        // this.name = name
      }
    }
    console.log(new Cat('cat1'))

    console.log('---------------------es5继承的几种方式---------------------')
    console.log('call 方式,不能继承父级的原型链')
    function Cat2 (...arg) {
      // Animal.apply(this, arg)
      Animal.call(this, ...arg)
    }
    let cat2 = new Cat2('cat2')
    console.log(cat2)
    // cat2.say()// undifined

    console.log('原型链方式, animal被实例化多次')
    function Cat3 (...arg) {
      Animal.call(this, ...arg)
    }
    Cat3.prototype = new Animal()
    let cat3 = new Cat3('cat3')
    console.log(cat3)
    console.log(cat3.name)
    console.log(cat3.say())

     console.log('------------------完美方式')
    function Cat4 (...arg) {
      Animal.call(this, ...arg)
    }
    Cat4.prototype = Object.create(Animal.prototype)
    Cat4.prototype.constructor = Cat4
    let cat4 = new Cat4('cat4')
    console.log(cat4)
    console.log(cat4.name)
    cat4.say()
  </script>
</body>
</html>